<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-v3/css/bootstrap.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="bootstrap-v3/js/bootstrap.js"></script>
    <style>
        .mNav {
            width: 100%;
            background: linear-gradient(150deg, #304FFE 15%, #00B0FF 70%, #64B5F6 94%);
            color: #fff;
            padding: 10px 0;
        }
        .navbar-default .navbar-brand{
            color: #fff;
        }
        .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
            color: #fff;
            background: transparent;
        }
        .navbar-nav{
            font-size: 17px;
        }
        .navbar-default .navbar-nav > li > a{
            color: #fff;
        }
        .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
            background: orange;
            color: #fff;
        }
    </style>
</head>

<body>
    <nav class="mNav navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <i class="glyphicon glyphicon-flag"></i>
                    HelpWang</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav row">
                    <li class="active col-xs-4 col-sm-2"><a href="#">Benefits</a></li>
                    <li class="col-xs-4 col-sm-2"><a href="#">Benefits</a></li>
                    <li class="col-xs-4 col-sm-2"><a href="#">Benefits</a></li>
                    <li class="col-xs-4 col-sm-2"><a href="#">Benefits</a></li>
                    <li class="col-xs-4 col-sm-2"><a href="#">Benefits</a></li>
                    <li class="col-xs-4 col-sm-2"><a href="#">Benefits</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" class="col-xs-6 col-sm-12">Try for free</a></li>
                    <li><a href="#" class="col-xs-6 col-sm-12">SING IN</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->

        </div>
    </nav>
</body>

</html>